<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./jquery.js"></script>
  </head>
  <style>
    .s_type {
      border: none;
      border-radius: 5px;
      background-color: #f3f3f3;
      padding: 7px 0;
      color: #606266;
      margin: 5px 2.5% 5px 0;
      width: 30%;
      position: relative;
    }

    .select {
      background-color: #ebf3ff;
      color: #5999fc;
    }

    /* 三角形 */
    .select:before {
      content: "";
      position: absolute;
      right: -12px;
      top: -12px;
      border: 12px solid #5999fc;
      border-top-color: transparent;
      border-right-color: transparent;
      /* border-left-color: transparent; */
      border-bottom-color: transparent;
      border-radius: 50%;
      transform: rotate(-45deg);
    }
    /* 对号 */
    .select:after {
      content: "";
      width: 2px;
      height: 5px;
      position: absolute;
      right: 3px;
      top: 0px;
      border: 1px solid #fff;
      border-top-color: transparent;
      border-left-color: transparent;
      transform: rotate(45deg);
    }
    /* .a:before { */
    .a::before {
      content: "♥";
      border: 1px solid red;
    }
  </style>
  <body>
    <button class="s_type select">2020年夏季</button>
    <div class="a">呀哎呀呀</div>
  </body>
</html>
